<template>
    <div>
        <mr-page-head />
        <mr-page-view :style="{ margin: `20px  24px`, width: 'auth' }">
            <vue-editor
                v-model="htmlStr"
                :editorToolbar="customToolbar"
            ></vue-editor>
        </mr-page-view>
    </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'

export default {
    name: 'editor',
    data() {
        return {
            list: [
                { a: '创建人', b: '曲丽丽' },
                { a: '订购产品', b: 'XX 服务' },
                { a: '创建时间', b: '2030-07-07' },
                { a: '关联单据', b: '12421' },
                { a: '生效日期', b: '2017-07-07 ~ 2017-08-08' },
                { a: '备注', b: '请于两个工作日内确认' }
            ],
            htmlStr: '',
            customToolbar: [
                [{ header: [false, 1, 2, 3, 4, 5, 6] }],
                ['bold', 'italic', 'underline', 'strike'], // toggled buttons
                [{ align: ['', 'center', 'right', 'justify'] }],
                ['blockquote'],
                [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
                [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
                [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
                [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                ['link', 'image'],
                ['clean']
            ]
        }
    },
    components: {
        VueEditor
    }
}
</script>

<style scoped>
@import '~vue2-editor/dist/vue2-editor.css';
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
</style>
